<template>
	<!--POP画册、POP下单、道具下单-->
	<view class="page-content">
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--封面-->
			<view class="body-box1">
				<image class="com-body-img" :src="objdata.image"></image>
				<image class="sel-img" :src="$mAssetsPath.icon_replace" @click.stop="replace_img(objdata.id)"></image>
				<view class="com-body-box">
					<view class="box-name">{{objdata.title}}</view>
				</view>
			</view>

			<!--流程-->
			<view class="body-box2" @click="tolinkflow(objdata.id)">
				<view class="box-l" :style="{color:objdata.flow ===''?'#999':'#333'}">
					{{objdata.flow ===''?'流程：':objdata.flow}}
				</view>
				<view class="icons icon-gengduo"></view>
			</view>

			<!--产品图片数据-->
			<template v-if="objdata.objlist && objdata.objlist.length > 0 ">
				<view class="body-box">
					<block v-for="(item,index) in objdata.objlist" :key="index">
						<view class="body-box-li" @click="selnum(index)">
							<product-num-edit :obj="item" :list="list" @choose="choose" @confirm="confirm_sel"
								@sel_mat="sel_mat" @rednum2="rednum2" @rednum1="rednum1" @addnum2="addnum2"
								@addnum1="addnum1" pageType="prop"></product-num-edit>
						</view>
					</block>
				</view>
				<view class="btn-box">
					<view class="submit" @tap="confirm()">保存</view>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<view class="w-con-txt" @click="toPop">POP画册</view>
					<view class="w-con-txt" @click="photoAlbum">手机相册</view>
					<view class="w-con-cen" @click="cancel('tip')">取消</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import productNumEdit from '@/pages/components/product_num_edit2.vue';
	import wPopup from '@/components/w-popup/w-popup2.vue';
	export default {
		components: {
			loadMore,
			productNumEdit,
			wSelSearch,
			wPopup
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				page_title: '',
				objdata: {
					id: 1,
					image: '/static/data-img/img.jpg',
					title: '任务名任务名任务名任务名',
					flow: '',
					objlist: [{
						pro_img: '/static/data-img/img.jpg',
						pro_name: 'XX系列图片系列图片系列图片',
						pro_txt: ['男', '鞋', '都市'],
						remark: '此订单需注意尺寸',
						datalist: [{
							pro_name: '易拉宝',
							texture: ['塑料', '玻璃', '棉'],
							list: [{
								is_edit: 1,
								name: '0.6米宽 2米高',
								type: 2,
								sizew: '',
								sizeh: '',
								num: 0
							}, {
								is_edit: 2,
								name: '1米宽 2米高',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 0
							}, {
								is_edit: 2,
								name: '1.2米宽 2米高',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 0
							}]
						}, {
							pro_name: '画册',
							texture: ['塑料', '玻璃', '棉'],
							list: [{
								is_edit: 1,
								name: '285mmx285mm',
								type: 2,
								sizew: '',
								sizeh: '',
								num: 0
							}, {
								is_edit: 2,
								name: '285mmx210mm',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 0
							}, {
								is_edit: 2,
								name: '250mmx250mm',
								type: 2,
								sizew: '500',
								sizeh: '370',
								num: 0
							}]
						}]
					}]
				},
				list: [{
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}],
				system: {
					w: 0,
					h: 0,
					scale: 1,
					systemScale: 1,
				},
				sel_index: 0, //选择当前项
				showtip: false, //是否显示弹窗1
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
			}
		},
		computed: {
			img_width() {
				return (this.system.w - 42) / 3;
			}
		},
		onShow() {
			uni.getSystemInfo().then(res => {
				let system = res[1]
				this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.systemScale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.w = system.windowWidth;
				this.system.h = system.windowHeight;
			})
		},
		onLoad(option) {
			console.log(222, option)
			if (!!option.title) {
				this.page_title = option.title;
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(123, e)
			if (e.index === 0) {
				this.content1 = 'center'
				this.type1 = 'bottom';
				this.showtip = !this.showtip;
			}
		},
		methods: {
			//跳转pop画册
			toPop() {
				uni.navigateTo({
					url: '/pages/picBook/picBookList?type=1&pageStatu=2&userType=system'
				})
			},
			//下弹窗
			photoAlbum() {
				uni.chooseImage({
					count: this.chooseNum,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: this.sourceType,
					success: (res) => {
						uni.navigateTo({
							url: `/pages/picBook/createTask?pageType=prop`
						})
						//console.log('tempFiles', res)
						if (this.action == '') { //未配置上传路径
							this.$emit("chooseSuccess", res.tempFilePaths);
						} else {
							if (this.compress && (res.tempFiles[0].size / 1024 >
									1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
								this.imgCompress(res.tempFilePaths);
							} else {
								this.imgUpload(res.tempFilePaths);
							}
						}
					}
				});
			},
			//修改图片
			replace_img(id) {

			},
			//跳转流程页面
			tolinkflow(id) {
				uni.navigateTo({
					url: `/pages/flow/flowlist?id=${id}`
				})
			},
			//材质选择
			choose(index) {
				if (this.list && this.list.length > 0) {
					this.list.forEach((item, ind) => {
						if (ind === index) {
							item.statu = !item.statu
						}
					})
				}
			},
			//材质弹窗
			sel_mat() {
				if (this.list && this.list.length > 0) {
					this.list.forEach((item, ind) => {
						this.$set(item, 'statu', false);
					})
				}
			},
			//确认材质选择
			confirm_sel(list, index) {
				console.log(555, list)
				if (this.objdata.objlist && this.objdata.objlist.length > 0) {
					this.objdata.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										item2.texture = list;
									}
								})
							}
						}
					})
				}
			},
			//筛选项
			selnum(index) {
				console.log(12, index)
				this.sel_index = index;
			},
			rednum2(index, index2) {
				if (this.objdata.objlist && this.objdata.objlist.length > 0) {
					this.objdata.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										if (item2.list && item2.list.length > 0) {
											item2.list.forEach((item3, iii) => {
												if (index2 === iii) {
													if (item3.num > 0) {
														item3.num -= 1
													}
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			addnum2(index, index2) {
				if (this.objdata.objlist && this.objdata.objlist.length > 0) {
					this.objdata.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										if (item2.list && item2.list.length > 0) {
											item2.list.forEach((item3, iii) => {
												if (index2 === iii) {
													item3.num += 1
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			rednum1(index, index2, index3) {
				if (this.objdata.objlist && this.objdata.objlist.length > 0) {
					this.objdata.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										if (item2.list && item2.list.length > 0) {
											item2.list.forEach((item3, iii) => {
												if (index2 === iii) {
													if (item3.list && item3.list.length > 0) {
														item3.list.forEach((item4, iiii) => {
															if (index3 === iiii) {
																if (item4.num > 0) {
																	item4.num -= 1
																}
															}
														})
													}
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			addnum1(index, index2, index3) {
				if (this.objdata.objlist && this.objdata.objlist.length > 0) {
					this.objdata.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										if (item2.list && item2.list.length > 0) {
											item2.list.forEach((item3, iii) => {
												if (index2 === iii) {
													if (item3.list && item3.list.length > 0) {
														item3.list.forEach((item4, iiii) => {
															if (index3 === iiii) {
																item4.num += 1
															}
														})
													}
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			//下一步
			confirm() {
				uni.navigateTo({
					url: '/pages/order/PopConfirmOrder'
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//重置筛选
			resetFilterData() {

			},
			//确认筛选
			setFilterData() {

			},
			loadmore() {

			},
			//底部弹窗
			change1(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 100vw;
		min-height: 300rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx 0rpx;
		margin: 30rpx auto 0;

		.w-con {
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
			text-align: center;

			.w-con-txt {
				border-bottom: 1rpx solid #f5f5f5;
			}

			.w-con-cen {
				color: #198FFF;
			}
		}
	}

	.page-content {
		border-top: 1rpx solid #f5f5f5;
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			height: calc(100% - 90rpx);
			padding: 0rpx;

			.btn-box {
				width: 100%;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 90rpx;
				display: flex;
				flex-shrink: 0;
				flex-direction: row !important;
				align-items: center;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 90rpx;
				color: $font-color-w;

				.submit {
					text-align: center;
					flex: 2;
					background-color: #198FFF;
				}
			}


			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				margin-bottom: 20rpx;

			}

			.body-box2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: $uni-bg-color;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.box-l {
					font-size: 32rpx;
					font-weight: 400;
				}
			}

			.body-box1 {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				padding: 30rpx 30rpx 0 30rpx;
				margin-bottom: 20rpx;
				position: relative;

				.sel-img {
					position: absolute;
					right: 60rpx;
					top: 60rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.com-body-img {
					width: 100%;
					height: 388rpx;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					overflow: hidden;
				}

				.com-body-box {
					display: flex;
					flex-direction: column;

					.box-name {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
						margin-bottom: 26rpx;
					}
				}
			}
		}
	}
</style>
